<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
       <div class="btnAdd">
          <el-button size="small"  type="success"   icon="el-icon-edit" @click="addQuestions">新增试题</el-button>
       </div>
      <el-form label-width="120px" ref="questionFrom" :model="formData">
      <!-- 第一列  -->
      <el-row class="inline-info">
         <el-col :span="6">
          <el-form-item label="学科">
            <el-select    v-model="formData.subjectID" placeholder="请选择" @change="getSecond($event)">
              <el-option v-for="item in subjectList" :key="item.value"  :value="item.value" :label="item.label" />
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
          <el-select    v-model="formData.catalogID" placeholder="请选择">
              <el-option v-for="item in catatory" :key="item.value"  :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
          <el-select    v-model="formData.tags" placeholder="请选择">
              <el-option v-for="item in tags" :key="item.value"  :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input style="width:75%" v-model="formData.keyword"  placeholder="请选择"/>
          </el-form-item>
        </el-col>
      </el-row>
    <!-- 第二列 -->
      <el-row class="inline-info">
         <el-col :span="6">
          <el-form-item label="试题类型">
          <el-select   v-model="formData.questionType" placeholder="请选择">
              <el-option v-for="(item,index) in questionType" :key="index" :value="item.label"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
          <el-select   v-model="formData.difficulty" placeholder="请选择">
              <el-option v-for="(item,index) in difficulty" :key="index" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select   v-model="formData.direction" placeholder="请选择">
              <el-option v-for="(item,index) in direction" :key="index" :value="item"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select   v-model="formData.creatorID" placeholder="请选择">
                  <el-option v-for="item in questionList" :key="item.id" :value="item.creator"/>
              </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三列 -->
       <el-row class="inline-info">
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input style="width:75%"   v-model="formData.remarks"  placeholder="请选择"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input  style="width:75%"  v-model="formData.shortName"  placeholder="请选择"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
             <el-select  style="width:30%" @change="getArea($event)"  v-model="formData.province" placeholder="请选择" >
                  <el-option v-for="(item,index) in citys" :key="index"  :label="item" :value="index"/>
              </el-select>
               <el-select    style="width:30%"  v-model="formData.city" placeholder="请选择">
                  <el-option v-for="(item,index) in area" :key="index"  :label="item" :value="index"/>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" >
          <el-form-item class="serach-Operation">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
      <!-- 提示 -->
    <common-tools >
       <span slot="before" class="text">共{{pagination.total}}条数据</span>
    </common-tools>
    <!-- 表格 -->
    <el-table border stripe :data="questionList">
          <el-table-column label="试题编号" prop="number"/>
          <el-table-column label="学科" prop="subject" />
          <el-table-column label="目录" prop="catalog"/>
          <el-table-column label="题型" prop="questionType" :formatter="formatdQuestionType"/>
          <el-table-column label="题干" width="280" prop="question" >
              <template slot-scope="{ row }">
                  <span v-html="row.question"></span>
              </template>
          </el-table-column>
          <el-table-column label="录入时间"  prop="addDate" >
              <!-- 作用域插槽 row 当前行的数据 -->
              <template slot-scope="{ row }">{{ row.addDate | formatDate }}</template>
          </el-table-column>
          <el-table-column label="难度"  prop="difficulty" :formatter="formatdDifficulty"/>
          <el-table-column label="录入人"  prop="creator"/>
          <el-table-column label="操作" fixed="right" width="280">
            <template slot-scope="{ row }">
                <el-button type="primary" plain size="small" class="btn-crud" @click="viewQuestions(row)">
                  <i class="el-icon-view"></i>
                </el-button>
                <el-button type="success" plain size="small" class="btn-crud" @click="editQuestions(row.id)">
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button type="danger" plain size="small" class="btn-crud" @click="deleteQuestion(row)">
                  <i class="el-icon-close"></i>
                </el-button>
                <el-button type="warning" plain size="small" class="btn-crud" @click="setChoice(row)" >
                  <i class="el-icon-check"></i>
                </el-button>
            </template>
          </el-table-column>
    </el-table>
    <!-- 查看弹层组件 -->
     <QuestionsView :show-dialog.sync="showDialog" :list="detailList"/>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <PageTool :paginationPage="pagination.page" :paginationPagesize="pagination.pageSize" :total="pagination.total" @pageChange="handleCurrentChange" @pageSizeChange="handleSizeChange">
        </PageTool>
        </el-row>
    </el-card>
    </div>
  </div>
</template>

<script>
import { list as getQuestions, remove, detail, choiceAdd } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as getSimple } from '@/api/hmmm/directorys'
import { simple as getTags } from '@/api/hmmm/tags'
import PageTool from '@/module-dashboard/components/pageTool'
import { provinces, citys } from '@/api/hmmm/citys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import QuestionsView from '../components/questions-preview.vue'
export default {
  data () {
    return {
      difficulty, // 难度
      questionType, // 类型
      direction, // 方向
      subjectList: [], // 学科简单列表
      citys: {}, // 城市
      area: {}, // 地区
      catatory: [], // 二级目录
      tags: [], // 标签
      questionList: [], // 接收表格数据的(基础题库列表)
      detailList: {}, // 基础题库详请
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业省份
        city: '' // 企业城市
      },
      pagination: {
        page: 1,
        total: 0,
        pageSize: 10,
        currentPage: 1
      },
      showDialog: false,

      // 是否加入精选
      state: {
        choiceState: 0
      }

    }
  },
  components: {
    QuestionsView,
    PageTool
  },
  created () {
    this.getList()
    this.getCity()
    this.getSubjectList()
  },
  methods: {
    async  getList () { // 获取基础题库列表
      try {
        const { data: { counts, items } } = await getQuestions(this.pagination)
        this.pagination.total = counts
        this.questionList = items
      // console.log(this.questionList)
      } catch (error) {
        console.log(error)
      }
    },
    async getSubjectList () { // 学科简单列表
      try {
        const { data } = await simple()
        // console.log(res)
        this.subjectList = data
      } catch (error) {
        console.log(error)
      }
    },
    // 学科显示
    async getSecond (val) {
      // console.log('学科id' + val)
      // val  传入当前学科的id id获取二级目录&标签
      const { data: res } = await getSimple(val)
      this.catatory = res
      // console.log(this.catatory)
      const { data: ret } = await getTags(val)
      // console.log(ret)
      this.tags = ret
    },
    getCity () { // 获取城市 数据
      this.citys = provinces()
    },
    getArea (val) { // 点击市 才能触发事件 拿到当前选中的id 根据id 获取区
      // console.log(val)
      this.area = citys(this.citys[val])
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      // console.log(val)
      this.pagination.pagesize = val
      if (this.pagination.page === 1) {
        this.getList(this.pagination)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getList()
    },
    //
    // 格式化
    formatdDifficulty (row, column, cellValue, index) {
      const obj = this.difficulty.find(item => item.value === Number(cellValue))
      // console.log(obj)
      return obj ? obj.label : '未知'
    },
    formatdQuestionType (row, column, cellValue, index) {
      const obj = this.questionType.find(item => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },
    // 清除 (表单赋值为空)
    clear () {
      this.formData = {}
      this.getList()
    },
    // 筛选
    async search () {
      const { data: { items } } = await getQuestions(this.formData)
      this.questionList = items
    },
    // 删除功能
    deleteQuestion (data) {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 预览
    async viewQuestions (data) {
      try {
        const res = await detail(data)
        // console.log(res)
        this.detailList = res.data
        this.showDialog = true
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑
    editQuestions (id) {
      this.$router.push(`new?id=${id}`)
    },
    // 新增
    addQuestions () {
      this.$router.push('new')
    },
    // 加入精选
    setChoice (data) {
      this.$confirm('将该试题加入精品题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        this.state.choiceState = 1
        await choiceAdd({ ...data, ...this.state })
        this.$router.push('choice')
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }

  }
}
</script>

<style scoped>
.btnAdd{
  display: flex;
  justify-content: end;
  margin-bottom: 20px;
  margin-right: 75px;
}
.messageText{
  margin-bottom: 20px;
}
.text{
  font-size: 12px;
  color: #909399;
}
.serach-Operation{
  display:flex;
  justify-content:end;
  margin-right: 75px;
}
.btn-crud{
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 10px;
  margin:0px 10px;
}

</style>
